<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    width="750px"
    :maskClosable="false">
    <div style="margin-top: 12px;min-height: 300px;min-width: 650px">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item ref="name" label="名称" prop="name" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input
            :disabled="disableSubmit"
            v-model.trim="addForm.name"
            @blur="() => { $refs.name.onFieldBlur() }"
            placeholder="请输入名称"></a-input>
        </a-form-model-item>
        <a-form-model-item label="编码" prop="code" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model.trim="addForm.code" placeholder="请输入编码"></a-input>
        </a-form-model-item>
        <a-form-model-item
          ref="resourceId"
          label="访问资源"
          prop="resourceId"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <PaginationSearchSelect
            @change="onChange"
            @input="onInput"
            :getValueSting="addForm.resourceId"
            ref="PaginationSelect"></PaginationSearchSelect>
        </a-form-model-item>
        <a-form-model-item
          label="节点类型"
          prop="nodeType"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-if="mode == 'add'">
          <a-select placeholder="请选择节点类型" @select="onSelect" v-model="addForm.nodeType">
            <a-select-option :value="item.id" v-for="(item, index) in nodeTypeList" :key="index">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="描述信息" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-textarea :rows="4" v-model.trim="addForm.description" placeholder="请输入描述信息" :max-length="255" />
        </a-form-model-item>

      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { addTree, detailTree, editTree } from '@/api/power'
// import { CONTENT_WIDTH_TYPE } from '@/store/mutation-types';
import { getResources } from '@/api/resource'
import PaginationSearchSelect from '@/components/PaginationSearchSelect/PaginationSearchSelect'
export default {
    components: { PaginationSearchSelect },
    data () {
        const checkNodeType = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择节点类型'))
            } else {
                callback()
            }
        }
        return {
            addRules: {
                name: [
                    { required: true, message: '请输入名称!', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入编码!', trigger: 'blur' }
                ],
                nodeType: [
                    { required: true, validator: checkNodeType, message: '请选择节点类型!', trigger: 'change' }
                ],
                resourceId: [
                    { required: true, message: '请输入访问控制资源!', trigger: 'change' }
                ]
            },
            addForm: {
                resourceId: undefined,
                name: '',
                code: '',
                nodeType: undefined,
                description: '',
                currentPermissionId: ''
            },
            nodeTypeList: [{ id: 1, name: '子节点' }, { id: 2, name: '同级节点' }],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            disableSubmit: false,
            iconChooseVisible: false,
            disable: true,
            model: {},
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: null,
            pagination: {
                // 分页配置
                pageSize: 10, // 每页显示的条数
                current: 1, // 当前页数
                total: 10, // 总条数
                resourceType: '',
                description: ''
            },
            resourceIdList: [],
            defaultSelectId: ''
        }
    },
    mounted () {
        // this.getResourceId()
    },

    methods: {
        // 绑定默认值
        onChange (e) {
            // console.log(e)
            // this.defaultSelectId = e
            // this.addForm.resourceId=e
        },
        //
        onInput (e) {
            this.addForm.resourceId = e
        },
        // 节点选择
        onSelect (e) {
            this.nodeType = e
        },
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            return this
        },
        setData (row) {
            this.rowData = row
            const _this = this
            if (this.mode == 'edit') {
                detailTree(row.permissionId).then(res => {
                    if (res.code == 200) {
                        _this.addForm = res.data
                        _this.$nextTick(() => {
                            _this.defaultSelectId = res.data.resourceId
                            const par = {
                                resourceId: res.data.resourceId,
                                resourceType: res.data.resourceType,
                                relatedResources: [
                                    {
                                        resourceId: res.data.resourceId,
                                        description: res.data.resourceDescription
                                    }
                                ]
                            }
                            _this.$refs.PaginationSelect.init(par)
                        })
                    }
                })
            } else {
                this.addForm.currentPermissionId = row.permissionId
                this.$nextTick(() => {
                    this.$refs.PaginationSelect.init()
                })
            }
        },

        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('success')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    if (this.addForm.nodeType == undefined) this.addForm.nodeType = ''
                    if (this.addForm.resourceId == undefined) this.addForm.resourceId = ''
                    const Api = this.mode == 'add' ? addTree : editTree
                    Api(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false

                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
